<link rel="stylesheet" href="resources/weui/dist/style/weui.min.css"/>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<!--<div style="background-color: white">-->
	<div id="role" style="display: none"><?php echo $role ?></div>
	<div id="asker_openid" style="display: none"><?php echo $asker_openid ?></div>
	<div id="server_openid" style="display: none"><?php echo $server_openid ?></div>
	<div id="name" style="display: none"><?php echo $name ?></div>
	<div id="headimgurl" style="display: none"><?php echo $headimgurl ?></div>
	<div id="curr_openid" style="display: none"><?php echo $curruser['openid'] ?></div>
	<div id="serverid" style="display: none"><?php echo $serverid ?></div>
	<div id="askerid" style="display: none"><?php echo $askerid ?></div>
	<div class="weui_cells weui_cells_access"  style="margin-top:0em;margin-bottom: 50px" id="conversation-content">
		<?php
		foreach ($conversations as $item): ?>
<!--			--><?php //if((($role=='asker') && ($curruser['openid']==$item['asker_openid']))||
//				(($role=='server') && ($curruser['openid']==$item['server_openid']))){ ?>

		<?php if(($role=='asker') && ($item['direction']==0)||($role!='asker') && ($item['direction']==1)){ ?>
				<div class="rightd">
					<div class="rightimg">
						<div><img src="<?php echo $item['headimgurl'] ?>" width="100%" alt="icon"/></div>
						<div><p><?php echo $item['name'] ?></p></div>
					</div>
					<div class="speech right" > <?php echo $item['content'] ?> </div>
				</div>
<!--				<div class="weui_cell">-->
<!--					<div class="weui_cell_hd weui_cell_primary" style="text-align: right;padding-right: 10px">-->
<!--						<p>--><?php //echo $item['content'] ?><!--</p></p>-->
<!--					</div>-->
<!--					<div class="weui_cell_bd">-->
<!--						<p>--><?php //echo $item['name'] ?><!--</p>-->
<!--					</div>-->
<!--					<div class="weui_cell_hd">-->
<!--						<img src="--><?php //echo $item['headimgurl'] ?><!--" alt="icon" style="width:40px;margin-right:5px;display:block"/>-->
<!--					</div>-->
<!--				</div>-->
			<?php }else{ ?>
<!--				<div class="weui_cell">-->
<!--					<div class="weui_cell_hd">-->
<!--						<img src="--><?php //echo  $item['headimgurl'] ?><!--" alt="icon" style="width:40px;margin-right:5px;display:block"/>-->
<!--					</div>-->
<!--					<div class="weui_cell_bd">-->
<!--						<p>--><?php //echo $item['name'] ?><!--</p>-->
<!--					</div>-->
<!--					<div class="weui_cell_hd weui_cell_primary" style="text-align: left;padding-left: 10px" >-->
<!--						<p>--><?php //echo $item-['content'] ?><!--</p></p>-->
<!--					</div>-->
<!--				</div>-->
				<div class="leftd">
					<div class="leftimg">
						<div><img src="<?php echo $item['headimgurl'] ?>" width="100%" alt="icon"/></div>
						<div><p><?php echo $item['name'] ?></p></div>
					</div>
					<div class="speech left" > <?php echo $item['content'] ?> </div>
				</div>

			<?php } ?>
		<?php endforeach;?>

	</div>

	<nav class="navbar navbar-default navbar-fixed-bottom" style="padding-top: 7px" id="bottom-nav">
		<div class="navbar-inner navbar-content-center" >
<!--			<div class="input-group">-->
<!---->
<!--			</div>-->
			<div class="input-group">
				<img src="resources/image/Camera.png" style="width: 30px;height:30px;float: left" id="sendimage"/>
<!--				<img src="resources/image/Camera.png" style="width: 30px;height:30px;float: left" id="sendlocation"/>-->
				<div class="textarea" contenteditable="true" id="content" style="width: 80%;float: left"></div>
      			<span class="input-group-btn">
		<a href="javascript:" class="weui_btn weui_btn_mini weui_btn_primary" id="send_location">位置</a>
		</span>
				<span class="input-group-btn">
        			<a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_primary" id="senddialog">发送</a>

				</span>
			</div><!-- /input-group -->
		</div>
	</nav>
<div class="weui_dialog_alert" id="weui_dialog_alert" style="display: none">
	<div class="weui_mask"></div>
	<div class="weui_dialog">
		<div class="weui_dialog_hd"><strong class="weui_dialog_title">提示</strong></div>
		<div class="weui_dialog_bd" id="dialog_info">弹窗内容，告知当前页面信息等</div>
		<div class="weui_dialog_ft">
			<a href="javascript:" class="weui_btn_dialog primary" id="dialog_check">确定</a>
		</div>

	</div>
</div>
<nav class="navbar navbar-default navbar-fixed-top" style="display: none" id="top-nav">
	<div class="navbar-inner navbar-content-center" >
		<div class="input-group">
			<span class="input-group-btn" style="float: left">
		<a href="javascript:" class="weui_btn weui_btn_mini weui_btn_default" id="cancel_location">取消</a>
		</span>
			<span class="input-group-btn">
				<a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_default" id="upload_location">发送</a>
			</span>
		</div><!-- /input-group -->
	</div>
</nav>
<iframe id="mapPage" width="100%" height="500px;"  style="display:none;" frameborder=0
		src="">
</iframe>
<div id="mapurl" style="display: none">
	http://3gimg.qq.com/lightmap/components/locationPicker2/index.html?search=1&type=1&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp
</div>
<div id="mapinfo" style="display: none">

</div>
<div id="nonceStr" style="display: none"><?php echo $nonceStr ?></div>
<div id="timestamp" style="display: none"><?php echo $timestamp ?></div>
<div id="APPID" style="display: none"><?php echo $APPID ?></div>
<div id="signature" style="display: none"><?php echo $signature ?></div>
<!--</div>-->
<script>
	window.addEventListener('message', function(event) {
		// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
		var loc = event.data;
		if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
			console.log('location', loc);
			var latlng=loc.latlng;
			var lat=latlng.lat;
			var lng=latlng.lng;
//			var str='<iframe width="100%" class="mapframe" frameborder=0 style="overflow: hidden" src="'+
//				'http://apis.map.qq.com/tools/poimarker?type=0&marker=coord:'+
//				lat+','+lng+'&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp"></iframe>'
			var str='<img width="100%" src="resources/image/maps.jpg" class="mapimag" id="'+lat+'-'+lng+'"/>';
			$('#mapinfo').html(str);
		}
	}, false);
	$(document).ready(function(){
		var appid=$('#APPID').html();
		var timestamp=$('#timestamp').html();
		var nonceStr=$('#nonceStr').html();
		var signature=$('#signature').html();
		$('#mapPage').height=window.screen.height;
		wx.config({
			debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId:appid , // 必填，公众号的唯一标识
			timestamp:timestamp , // 必填，生成签名的时间戳
			nonceStr: nonceStr, // 必填，生成签名的随机串
			signature: signature,// 必填，签名，见附录1
			jsApiList: [
				'onMenuShareAppMessage',
				'onMenuShareQQ',
				'onMenuShareWeibo',
				'onMenuShareTimeline',
				'closeWindow',
				'chooseImage',
				'uploadImage',
				'previewImage',
				'openLocation',
				'getLocation'
			] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
		});
		$(document).on('click', '#send_location',function () {
			$('#mapinfo').html('');
			$('#conversation-content').hide();
			$('#bottom-nav').hide();
			$('#mapPage').attr("src",$('#mapurl').html());
			$('#mapPage').show();
			$('#top-nav').show();
		});

		$(document).on('click', '#cancel_location',function () {
			$('#mapinfo').html('');
			$('#top-nav').hide();
			$('#mapPage').attr("src",'');
			$('#mapPage').hide();
			$('#conversation-content').show();
			$('#bottom-nav').show();
		});

		$(document).on('click', '#upload_location',function () {
			if($('#mapinfo').html()==''){
				$('#dialog_info').html('请先选择下方列表中的地址！');
				$('#weui_dialog_alert').show();
				return;
			}
			var asker_openid=$('#asker_openid').html();
			var server_openid=$('#server_openid').html();
			var role=$('#role').html();
			var curr_openid=$('#curr_openid').html();
			var name=$('#name').html();
			var headimgurl=$('#headimgurl').html();
			var serverid=$('#serverid').html();
			var str=$('#mapinfo').html();
			loadMoreData(str,asker_openid,server_openid,role,name,headimgurl,serverid);
			$('#mapinfo').html('');
			$('#top-nav').hide();
			$('#mapPage').attr("src",'');
			$('#mapPage').hide();
			$('#conversation-content').show();
			$('#bottom-nav').show();
		});
		$(document).on('click', 'img.uploadimg',function () {
		//$('img.uploadimg').click(function () {
			var imgurl=$(this).attr('src');
			var urls=[];
			urls.push(imgurl);
			wx.previewImage({
				current: window.location.href, // 当前显示图片的http链接
				urls: urls // 需要预览的图片http链接列表
			});
		});


//		$(document).on('click', '.speech',function () {
//			if($(this).find('iframe').length==0){
//				return;
//			}
//			var src=$(this).find('iframe')[0].src;
//			var src_param=src.split('?');
//			var param=src_param[1];
//			var params=param.split('&');
//			var pairs=[];
//			for(var i=0;i<params.length;i++){
//				var pair=params[i].split('=');
//				pairs[pair[0]]=pair[1];
//			}
//			var marker=pairs['marker'];
//			var markers=marker.split(':');
//			var latlng=markers[1];
//			var latlns=latlng.split(',');
//			var lat=latlns[0];
//			var lng=latlns[1];
//			wx.openLocation({
//							latitude: lat, // 纬度，浮点数，范围为90 ~ -90
//							longitude: lng, // 经度，浮点数，范围为180 ~ -180。
//							name: '', // 位置名
//							address: '', // 地址详情说明
//							scale: 14, // 地图缩放级别,整形值,范围从1~28。默认为最大
//							infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
//
//						});
//		});

//		wx.ready(function () {
//			var localIds='';
//			document.querySelector('#sendimage').onclick = function () {
//				wx.chooseImage({
//					count: 1, // 默认9
//					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
//					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
//					success: function (res) {
//					 	localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
//						wx.uploadImage({
//							localId: localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
//							isShowProgressTips: 1, // 默认为1，显示进度提示
//							success: function (res) {
//								var serverId = res.serverId; // 返回图片的服务器端ID
//								save_image_to_conversation(serverId)
//							}
//						});
//					}
//				});
//			};
//
//		});
		$(document).on('click','.mapimag',function () {
//			alert('dfd');
			var id=$(this).attr('id');
			var latlns=id.split('-');
			var lat=latlns[0];
			var lng=latlns[1];
//				var lat=30.27892;
//				var lng=120.1402;
//				lat=lat.toFixed(5);
//				lng=lng.toFixed(4);
			lat=parseFloat(lat);
			lng=parseFloat(lng);
//			alert(lat+'-'+lng);
			wx.openLocation({
				latitude: lat, // 纬度，浮点数，范围为90 ~ -90
				longitude: lng, // 经度，浮点数，范围为180 ~ -180。
				name: '', // 位置名
				address: '', // 地址详情说明
				scale: 14, // 地图缩放级别,整形值,范围从1~28。默认为最大
				infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
			});
		});
		wx.ready(function () {
//				wx.getLocation({
//					type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
//					success: function (res) {
//						var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
//						var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
//						alert(latitude+'-'+longitude);
//						wx.openLocation({
//							latitude: latitude, // 纬度，浮点数，范围为90 ~ -90
//							longitude: longitude, // 经度，浮点数，范围为180 ~ -180。
//							name: '', // 位置名
//							address: '', // 地址详情说明
//							scale: 14, // 地图缩放级别,整形值,范围从1~28。默认为最大
//							infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
//
//						});
//					}
//				});
			var localIds='';

			document.querySelector('#sendimage').onclick = function () {
				wx.chooseImage({
					count: 1, // 默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: function (res) {
						localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
						wx.uploadImage({
							localId: localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
							isShowProgressTips: 1, // 默认为1，显示进度提示
							success: function (res) {
								var serverId = res.serverId; // 返回图片的服务器端ID
								save_image_to_conversation(serverId)
							}
						});
					}
				});
			};
//			document.querySelector('#sendlocation').onclick = function () {
//				wx.getLocation({
//					type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
//					success: function (res) {
//						var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
//						var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
//						var speed = res.speed; // 速度，以米/每秒计
//						var accuracy = res.accuracy; // 位置精度
//						var asker_openid=$('#asker_openid').html();
//						var server_openid=$('#server_openid').html();
//						var role=$('#role').html();
//						var curr_openid=$('#curr_openid').html();
//						var name=$('#name').html();
//						var headimgurl=$('#headimgurl').html();
//						var serverid=$('#serverid').html();
//						str='<div style="width: 100%" class=""> <img src="index.php/resources/image/maps.jpg" class="" style="width:100%"/>'.
//								'<div style="display: none">';
//						loadMoreData(str,asker_openid,server_openid,role,name,headimgurl,serverid);
//
//
//						wx.openLocation({
//							latitude: latitude, // 纬度，浮点数，范围为90 ~ -90
//							longitude: longitude, // 经度，浮点数，范围为180 ~ -180。
//							name: '', // 位置名
//							address: '', // 地址详情说明
//							scale: 14, // 地图缩放级别,整形值,范围从1~28。默认为最大
//							infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
//
//						});
//					}
//				});
//			};
		});



		function save_image_to_conversation(media_id){

			download_image_to_weserver(media_id);

		}

		function download_image_to_weserver(serverId){
			var url='index.php/MediaController/save_media';
			var dt={
				media_id:serverId
			};
			$.ajax( {
				url:url,// 跳转到 action
				data:dt,
				type:'post',
				cache:false,
				dataType:'json',
				success:function(data) {
					var isSuccess=data.isSuccess;
					if(!isSuccess){
						giveAlert(data.errorMessage);
					}else{
						var asker_openid=$('#asker_openid').html();
						var server_openid=$('#server_openid').html();
						var role=$('#role').html();
						var curr_openid=$('#curr_openid').html();
						var name=$('#name').html();
						var headimgurl=$('#headimgurl').html();
						var serverid=$('#serverid').html();
						str='<img src="'+data.data+'" class="uploadimg" style="width:100%"/>';
						loadMoreData(str,asker_openid,server_openid,role,name,headimgurl,serverid);
					}
				},
				error : function(XMLHttpRequest, textStatus, errorThrown) {
					//alert(XMLHttpRequest.status);
					//alert(XMLHttpRequest.readyState);
					//alert(textStatus);
				}
			});
		}

		$('#senddialog').click(function(){
			var asker_openid=$('#asker_openid').html();
			var server_openid=$('#server_openid').html();
			var role=$('#role').html();
			var curr_openid=$('#curr_openid').html();
			var name=$('#name').html();
			var headimgurl=$('#headimgurl').html();
			var serverid=$('#serverid').html();
//			if(asker_openid==server_openid){
//				$('#dialog_info').html('自己不能咨询自己！');
//				$('#weui_dialog_alert').show();
//				return;
//			}
			var str=$('#content').html();
			if($.trim(str)==''){
				if(role=='asker'){
					$('#dialog_info').html('请先输入问题！');
				}else{
					$('#dialog_info').html('请先输入回复内容！');
				}
				$('#weui_dialog_alert').show();
				return;
			}
			loadMoreData(str,asker_openid,server_openid,role,name,headimgurl,serverid);
			$('#content').html('');
		});

		$('#dialog_check').click(function(){
			$('#weui_dialog_alert').hide();
		});

	});

	function loadMoreData(content,asker_openid,server_openid,role,name,headimgurl,serverid){
		var url='index.php/contactonline/save';
		var direction=0;
		var askerid=$('#askerid').html();
		if(role=='asker'){
			direction=0;
		}else{
			direction=1;
		}
		var dt={
			askerid:askerid,
			serverid:serverid,
			content:content,
			asker_openid:asker_openid,
			server_openid:server_openid,
			name:name,
			headimgurl:headimgurl,
			direction:direction
		};
		$.ajax( {
			url:url,// 跳转到 action
			data:dt,
			type:'post',
			cache:false,
			dataType:'json',
			success:function(data) {
				var isSuccess=data.isSuccess;
				if(!isSuccess){
					giveAlert(data.errorMessage);
				}else{
					var htmls='';
					htmls+='<div class="rightd">';
					htmls+='<div class="rightimg">';
					htmls+='<div><img src="'+$('#headimgurl').html()+'" width="100%" alt="icon"/></div>';
					htmls+='<div><p>'+$('#name').html()+'</p></div>';
					htmls+='</div>';
					htmls+='<div class="speech right" >'+content+'</div>';
					htmls+='</div>';
					$('.weui_cells').append(htmls);

					$(document).scrollTop($(document).height());
				}
			},
			error : function(XMLHttpRequest, textStatus, errorThrown) {
				//alert(XMLHttpRequest.status);
				//alert(XMLHttpRequest.readyState);
				//alert(textStatus);
			}
		});
	}
</script>
<style>
	.textarea{
		width: 100%;
		min-height: 20px;
		max-height: 300px;
		_height: 120px;
		margin-left: auto;
		margin-right: auto;
		padding: 3px;
		outline: 0;
		border: 1px solid #a0b3d6;
		font-size: 12px;
		line-height: 24px;
		padding: 2px;
		word-wrap: break-word;
		overflow-x: hidden;
		overflow-y: auto;
		background-color: white;
		border-color: rgba(82, 168, 236, 0.8);
		box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
	}
</style>
<style>
	div.speech {
		margin: 10px 0;
		padding: 8px;
		table-layout: fixed;
		word-break: break-all;
		position: relative;
		background: -webkit-gradient( linear, 50% 0%, 50% 100%, from(#ffffff), color-stop(0.1, #ececec), color-stop(0.5, #dbdbdb), color-stop(0.9, #dcdcdc), to(#8c8c8c) );
		border: 1px solid #989898;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
	}
	div.speech:before {
		content: '';
		position: absolute;
		width: 0;
		height: 0;
		left: 15px;
		top: -20px;
		border: 10px solid;
		border-color: transparent transparent #989898 transparent;
	}
	div.speech:after {
		content: '';
		position: absolute;
		width: 0;
		height: 0;
		left: 17px;
		top: -16px;
		border: 8px solid;
		border-color: transparent transparent #ffffff transparent;
	}
	div.speech.right {
		box-shadow: -2px 2px 5px #CCC;
		margin-right: 10px;
		width: 50%;
		float: right;
		text-align: right;
		background: -webkit-gradient( linear, 50% 0%, 50% 100%, from(#e4ffa7), color-stop(0.1, #bced50), color-stop(0.4, #aed943), color-stop(0.8, #a7d143), to(#99BF40) );
	}
	div.speech.right:before {
		content: '';
		position: absolute;
		width: 0;
		height: 0;
		top: 9px;
		bottom: auto;
		left: auto;
		right: -10px;
		border-width: 9px 0 9px 10px;
		border-color: transparent #989898;
	}
	div.speech.right:after {
		content: '';
		position: absolute;
		width: 0;
		height: 0;
		top: 10px;
		bottom: auto;
		left: auto;
		right: -8px;
		border-width: 8px 0 8px 9px;
		border-color: transparent #bced50;
	}
	div.speech.left {
		box-shadow: 2px 2px 2px #CCCCCC;
		margin-left: 10px;
		width: 50%;
		float: left;
		text-align: left;
		background: -webkit-gradient( linear, 50% 0%, 50% 100%, from(#ffffff), color-stop(0.1, #eae8e8), color-stop(0.4, #E3E3E3), color-stop(0.8, #DFDFDF), to(#D9D9D9) );
	}
	div.speech.left:before {
		content: '';
		position: absolute;
		width: 0;
		height: 0;
		top: 9px;
		bottom: auto;
		left: -10px;
		border-width: 9px 10px 9px 0;
		border-color: transparent #989898;
	}
	div.speech.left:after {
		content: '';
		position: absolute;
		width: 0;
		height: 0;
		top: 10px;
		bottom: auto;
		left: -8px;
		border-width: 8px 9px 8px 0;
		border-color: transparent #eae8e8;
	}
	.leftimg {
		float: left;
		margin-top: 10px;
		width:20%;
	}
	.rightimg {
		float: right;
		margin-top: 10px;
		width:20%;
	}
	.leftd {
		clear: both;
		float: left;
		background: url(jquerymobile/images/icon3.png) 0px 10px no-repeat;
		padding-left: 20px;
	}
	.rightd {
		clear: both;
		float: right;
		background: url(jquerymobile/images/icon10.png) right 10px no-repeat;
		padding-right: 20px;
	}
	.clear {
		clear: both;
	}
</style>